<template>
	<view class="card" v-for="(item, idx) in props.dataList" :key="item.id" @tap.stop="viewDetail(item.id)">
		<view class="card_tit u-flex-y-center u-flex-between">
			<view class="card_tit_l u-line-1">工程名称工程名称工程名称工程名称工程名称工程名称工程名称工程名称工程名称工程名称工程名称工程名称</view>
			<view class="card_tit_r flex_center" :style="{ color: getStatus(1).color, backgroundColor: getStatus(1).bgColor }">{{ getStatus(1).label }}</view>
		</view>
		<view class="card_info u-flex-between u-flex-y-center">
			<view class="steps flex_center">
				<view class="steps_icon"></view>
				<view class="steps_line"></view>
				<view class="steps_icon"></view>
			</view>
			<view class="times">
				<view class="end_time flex">
					<view class="label">完工时间</view>
					<view class="">2025-07-30 12:00</view>
				</view>
				<view class="flex">
					<view class="label flex">开工时间</view>
					<view class="">2025-07-30 12:00</view>
				</view>
			</view>
		</view>
		<view class="tags flex">
			<view class="tag">工种</view>
			<view class="tag">空间位置</view>
		</view>

		<view class="action u-flex-between" v-if="item.tabIdx === 0">
			<view class="action_btn action_contact u-flex-xy-center" @tap.stop="callPhone(idx)">
				<image :src="getFileUrl('0x72412301')" mode=""></image>
				<text class="">联系客户</text>
			</view>
			<view :class="['action_btn action_repair u-flex-xy-center', item.arriveTime && item.status != 1 && item.status != 0 ? '' : 'act_action_repair']">
				{{ item.arriveTime && item.status != 1 && item.status != 0 ? "服务中" : "上报到达" }}
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { getFileUrl } from "@/utils/common";
import { getStatus } from "../status";

// 定义 props 接口
interface Props {
	dataList: EmptyArrayType;
	cancelReason: EmptyObjectType;
}

const props = withDefaults(defineProps<Props>(), {
	dataList: () => [],
	cancelReason: () => ({}),
	title: "工单详情"
});

const state = reactive({
	tabIdx: 0
});

// 查看详情
const viewDetail = (id) => {
	const item = props.dataList.find((v) => v.id === id);
	// 已完成并且未支付
	if (item.status === "4" && !item.payStatus) {
		return uni.navigateTo({
			url: `/myPagesA/pages/workOrder/payOrder?id=${id}`
		});
	}
	uni.navigateTo({
		url: `/myPagesA/pages/workOrder/detail?id=${id}`
	});
};

// 联系客户
const callPhone = (idx) => {
	const { customerPhone } = props.dataList[idx];
	uni.makePhoneCall({
		phoneNumber: customerPhone
	});
};
</script>

<style lang="scss" scoped>
.card {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 30rpx 30rpx 1px 30rpx;
	font-size: 30rpx;
	margin-top: 24rpx;
	.card_tit {
		padding-bottom: 30rpx;
		.card_tit_l {
			width: 520rpx;
		}
		.card_tit_r {
			padding: 2rpx 8rpx;
			border-radius: 4rpx;
			font-size: 24rpx;
		}
	}
	.tags {
		font-size: 24rpx;
		padding-bottom: 24rpx;
		:last-child.tag {
			margin-right: 0;
		}
		.tag {
			padding: 2rpx 16rpx;
			color: #5b6065;
			border-radius: 8rpx;
			background-color: #f0f2f5;
			margin-right: 16rpx;
		}
	}
	.card_info {
		color: #333333;
		font-size: 28rpx;
		padding-bottom: 24rpx;
		.times {
			width: calc(100% - 32rpx);
			.label {
				font-weight: bold;
				padding-right: 16rpx;
			}
			.end_time {
				padding-bottom: 24rpx;
			}
		}
		.steps {
			margin-right: 16rpx;
			flex-direction: column;
			:nth-child(1) {
				background-color: #0ec880;
			}
			:nth-child(3) {
				background-color: #fb5c03;
			}
			.steps_icon {
				width: 16rpx;
				height: 16rpx;
				border-radius: 50%;
			}
			.steps_line {
				width: 1px;
				height: 34rpx;
				margin: 6rpx 0;
				background-color: #e1e2e3;
			}
		}
	}
	.action {
		@include flex;
		margin-bottom: 24rpx;
		.action_btn {
			height: 76rpx;
			border-radius: 8rpx;
		}
		.action_contact {
			background: rgba(72, 108, 246, 0.07);
			color: #486cf6;
			font-size: 28rpx;
			width: 196rpx;
			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 12rpx;
			}
		}
		.action_repair {
			background: #0ec880;
			color: #fff;
			font-weight: bold;
			font-size: 30rpx;
			width: calc(100% - 196rpx - 32rpx);
		}
		.action_repair.act_action_repair {
			background-color: #4068e1;
		}
	}
}
</style>
